<template>
  <div id="switchover" style="width: 1100px;margin: 0 auto">
  <span>
          <h2 style="color: white;margin-top: 50px;text-align: center">云南职疫情大数据监控平台</h2>
  </span>
    <br>
    <div id="botton" style="width: 500px;margin: 0 auto">
    <el-form :model="insert" status-icon :rules="rules" ref="insert" label-width="110px" class="demo-ruleForm">
      <el-form-item label="学号:" prop="stu_id" class="liable">
        <el-input v-model="ruleForm.stu_id"  placeholder="请输入学号" maxlength="16" show-word-limit id="stu_id" prefix-icon="el-icon-user" style="width: 280px;"></el-input>
      </el-form-item>
      <el-form-item label="事由:" prop="reason" class="liable">
        <el-input type="text" v-model="ruleForm.reason" autocomplete="off"  placeholder="请输入密码" maxlength="16" id="reason" prefix-icon="el-icon-lock"  style="width: 280px;"></el-input>
      </el-form-item>
      <el-form-item label="地点:" prop="place" class="liable">
        <el-input type="text" v-model="ruleForm.place" autocomplete="off"  placeholder="请输入密码" maxlength="16" id="place" prefix-icon="el-icon-lock"  style="width: 280px;"></el-input>
      </el-form-item>
      <el-form-item label="离校时间:" prop="out" class="liable">
        <el-input type="text" v-model="ruleForm.out" autocomplete="off"  placeholder="请输入密码" maxlength="16" id="out" prefix-icon="el-icon-lock"  style="width: 280px;"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()" id="login">登 录</el-button>
      </el-form-item>
    </el-form>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "insert",
  data () {
    return {
      ruleForm: {
        stu_id: '',
        reason: '',
        place:'',
        out:''
      }
    }
  },  methods: {
    async submitForm() {
      // 获取用户输入的用户名和密码
      var stuid = document.getElementById("stu_id").value
      var reason = document.getElementById("reason").value
      var place = document.getElementById("place").value
      var out = document.getElementById("out").value
      (new Date()).toLocaleDateString() + " " + (new Date()).toLocaleTimeString()
//'2022/1/18 上午10:30:30'

      // 发送 POST 请求
      await axios({
        method: 'post',
        url: 'http://localhost:8081/insert',
        data: {
          stuId: stuid,
          reason: reason,
          place: place,
          outdate: out
        }
      }).then(function (response) { // 请求成功
        if (response.data === true) {
          this.$message({
            showClose: true,
            message: '添加成功',
            type: 'success'
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
